<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title th:text="#{recent-contest} + ' - Online Judge'"></title>
    <meta http-equiv="keywords" content="HappyOJ,ACM,程序竞赛,全世界,全网OJ比赛日历,最全OJ比赛日历">
    <meta http-equiv="description" content="HappyOJ,ACM,程序竞赛,全世界,全网OJ比赛日历,最全OJ比赛日历">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-no-sidebar">
            <div>
                <h4><span class="contest-supp-title">#[[#{recent-contest}]]</span></h4>
                <table class="events rtable-recent-oj contest_upcoming" id="contest_body"></table>
            </div>
            <div class="contest-supp" >
                <h4><span class="contest-supp-title">#[[#{recent-contest-support}]]</span></h4>
                <div class="contest-supp-list" id="contest_supp_body"></div>
            </div>
            <script th:src="@{/js/messager.js}"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    var total = 0;
                    function tableSort(idx) {
                        var trList = $('table.events').find('tr');
                        var length = trList.length;
                        var ojName = trList.eq(idx).attr("ojName");
                        var status = trList.eq(idx).hasClass("contest-pending");
                        var insertIndex = idx;
                        var num = 0;
                        for (var i = idx + 1; i < length ;i++) {
                            var trList = $('table.events').find('tr');
                            if (trList.eq(i).attr("ojName") === ojName &&
                                trList.eq(i).hasClass("contest-pending") === status) {
                                if (i == insertIndex + 1) {
                                    /* 如果与上一个节点一样，不需要移动 */
                                    var img = trList.eq(i).find('img.event-name');
                                    img.css({'margin-left':'20px'});
                                    /* 记录下次要插入的位置 */
                                    insertIndex = i;
                                } else {
                                    /* 如果与上一个节点不一样，需要移动到合适的位置 */
                                    var tr = trList.eq(i);
                                    /* 需要增加缩进图标*/
                                    var img = tr.find('img.event-name');
                                    img.css({'margin-left':'20px'});
                                    /* 移动到合适的位置 */
                                    trList.eq(insertIndex).after(tr);
                                    insertIndex = insertIndex + 1;
                                }
                                num++;
                            }
                        }
                        if (num > 0) {
                            total += num;
                            var append = trList.eq(idx).find('a.event-name');
                            append.after("<span class='contest-item-num'>"+num+"<span class='expand-mark caret-up'></span></span>");
                            /* 默认收起 */
                            switchNextContestItemState(trList.eq(idx), ojName, false, 0);
                        }
                        var numSpan = $('table.events').find('.totalNum');
                        numSpan.text(total);
                        if (insertIndex < length) {
                            setTimeout(function () { tableSort(insertIndex + 1); }, 10);
                        }
                    }
                    function UpdateContects(){
                        $('#contest_body').html("");
                        $.getJSON('/data/otheroj.json',function(data){
                            const ojMap = new Map();
                            var contest_supp_html = "";
                            contests_supp = data.support_list;
                            $.each(contests_supp, function(i,item){
                                ojMap.set(item.name, item.link);
                                contest_supp_html += "<span class='oj-support-item' >"
                                    + "<a href='" + item.link +"'>"
                                    + "<img class='small-oj-brand' src='/img/otheroj/favicon_" + item.name.toLowerCase() + ".png' />"
                                    + item.name +"</a></span>";
                            });
                            $('#contest_supp_body').html("");
                            $('#contest_supp_body').html(contest_supp_html);

                            var contest_html = "<tr class='header'>"+
                                "<th class='start'>[[#{starttime}]]/[[#{endtime}]](UTC+8)</th>"+
                                "<th class='during'>[[#{during}]]</th>"+
                                "<th class='countdown'>[[#{contest-time-left}]]</th>"+
                                "<th class='name '>[[#{contesttitle}]] "+
                                "<span class='contest-item-num'><span class='totalNum'>"+ 0 + "</span><span class='expand-mark caret-up'></span></span>"+
                                "<div class='recent-contest-update'>"+
                                "<span><a href='/data/otheroj.json'>"+
                                "[[#{recent-contest-update}]] <span class='otheroj_create_time'>"+
                                    OnlineJudge.timeFormatSeconds(data.createDate) + " UTC+8"+
                                "</span>"+
                                "</a></span>"+
                                "<a class='start-contest-update'>[[#{start-contest-update}]]</a>"+
                                "</div>"+
                                "</th></tr>";
                            contests = data.contests;
                            if(contests.length == 0){
                                contest_html = "<tr><td class='left-item' colspan='15' style='text-align: left;'>[[#{no-record}]]</td></tr>";
                            }else{
                                $.each(contests, function(i,item){
                                    var link = ojMap.get(item.oj)
                                    var duration = item.end_date - item.start_date;
                                    var durationStr = OnlineJudge.parseFriendlyDuration(Math.floor(duration/1000));
                                    if (new Date().getTime() > item.start_date) {
                                        var count = item.end_date - new Date().getTime();
                                        if (count < 0) {
                                            return true;
                                        }
                                        contest_html +="<tr class='contest-running' ojName='"+item.oj+"'>"
                                            + "<td class='start' title='" + item.start_time + " - "+ item.end_time + "'>"
                                            + item.end_time +"</td>";
                                        contest_html +="<td class='during'>"+ durationStr +"</td>";
                                    } else {
                                        var count = item.start_date - new Date().getTime();
                                        if (count < 0) {
                                            return true;
                                        }
                                        contest_html +="<tr class='contest-pending' ojName='"+item.oj+"'>"
                                            + "<td class='start'title='" + item.start_time + " - "+ item.end_time + "'>"
                                            + item.start_time +"</td>";
                                        contest_html +="<td class='during'>"+ durationStr +"</td>";
                                    }

                                    contest_html +="<td class='countdown'><span class='countdown'><span>"
                                        + OnlineJudge.parseFriendlyTimeLeft(Math.floor(count/1000)) + "</span></span></td>";
                                    contest_html +="<td class='name'><a class='event-name' href='"+ item.link +"' target='_blank'>"+
                                        "<img class='event-name small-oj-brand' src='/img/otheroj/favicon_" + item.oj.toLowerCase() + ".png' title='" +
                                        item.oj + "'/>" +
                                        item.name.trim() +"</a>"+
                                        "<div class='recent-contest-update'><a href='"+link+"'>"
                                            +String(link).replace("http://","").replace("https://","")
                                            +"</a></div></td>";
                                    contest_html +="</tr>";
                                });
                            }
                            $('#contest_body').html(contest_html);
                            OnlineJudge.countdownEx();
                            setTimeout(function () { tableSort(1); }, 100);
                        });
                    }
                    UpdateContects();

                    function switchNextContestItemState(tr, oj, show, t) {
                        var nextTr = tr.next('tr');
                        if (oj == nextTr.attr("ojName")) {
                            if (show) {
                                nextTr.slideDown(t + 20);
                            } else {
                                nextTr.slideUp(t + 20);
                            }
                            switchNextContestItemState(nextTr, oj, show, t + 20);
                        }
                    }

                    function switchAllContestItemState(show) {
                        var list = $('table.events').find('.contest-item-num');
                        for (var i = 1; i < list.length ;i++) {
                            var tr = list.eq(i).closest('tr');
                            var oj = tr.attr("ojName");
                            var mark = tr.find(".expand-mark")
                            if (show) {
                                mark.attr("class", "expand-mark caret-down");
                                switchNextContestItemState(tr, oj, show, 60);
                            } else {
                                mark.attr("class", "expand-mark caret-up");
                                switchNextContestItemState(tr, oj, show, 60);
                            }
                        }
                    }

                    $(document).on("click",".contest-item-num",function(){
                        var tr = $(this).closest("tr");
                        var oj = tr.attr("ojName");
                        var mark = $(this).children(".expand-mark")
                        var show = true;
                        if (mark.hasClass("caret-up")) {
                            mark.attr("class", "expand-mark caret-down");
                        } else {
                            mark.attr("class", "expand-mark caret-up");
                            show = false;
                        }
                        if (oj === undefined) {
                            switchAllContestItemState(show)
                            return;
                        }
                        switchNextContestItemState(tr, oj, show, 60);
                    });

                    $(document).on("click","a.start-contest-update",function(){
                        $.messager.show('提示', '开始更新。', 5000);
                        $.getJSON("/api/admin/contest/collect", {},function(json) {
                            $.messager.show('提示', '更新成功。', 5000);
                            UpdateContects();
                        });
                    });
                });
            </script>
        </div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
</body>
</html>
